<body class="no-skin">
    <link href="./Public/Admin/css/H-ui.min.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="./Public/Admin/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="./Public/Admin/lib/layer/1.9.3/layer.js"></script>
	<link rel="stylesheet" href="./Public/Admin/lib/layer/1.9.3/skin/layer.css" id="layui_layer_skinlayercss">

<style type="text/css">
        *{
            font-weight: bolder !important;
        }
        .col-lg-5, .col-lg-9{
            float: none;
            margin: auto;
            margin-bottom: 30px;
        }
        .table {
            background-color: #eaeaea;
        }
        .table tr:first-child {
            color: #fff;
            background-color: #8ab2c9;
            height: 20px;
        }
        .show {
            height: 30px;
            border: #e4b9b9 solid 1px;
            padding: 20px;
            margin-bottom: 24px;
            color: #2b542c;
        }
        #create_tb {
            overflow: auto;
            margin-bottom: 12px;
        }
        .box{
            max-height: 380px;
            height: 370px;
            float: left;
            margin-right: 1%;
            width: 32%;
            margin-bottom: 12px;
            overflow: auto;
        }
        .g_success{
            position: absolute;
            width: 120px;
            height: 44px;
            text-align: center;
            left: 35%;
            top: 40%;
            background: #6ba462;
            font-size: 32px;
            color: #fff;
            padding: 8px 12px;
        }
        #saoma{
            width: 428px;
            float: left;
            height: 40px !important;
            font-size: 22px;
            font-weight: bolder;
        }
        #create_box div:first-child {
            margin: auto;
            float: none;
            margin-bottom: 12px;
        }
        #hidden_left{
            display: block;
            float: left;
            margin-top: 12px;
            margin-left: 8px;
        }
        .btn-group .btn{
            padding: 9px 12px 27px 12px;
            height: 30px !important;
        }
        body .demo-class .layui-layer-title{background:#333; color:#fff; border: none;font-size:20px;} body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7;padding:0;text-align:left;} body .demo-class .layui-layer-content{height:80px !important;font-size:30px;} body .demo-class .layui-layer-btn a{background:none;} body .demo-class .layui-layer-btn .layui-layer-btn1{background:none;} body .demo-class2 .layui-layer-title{background:#333; color:#fff; border: none;font-size:20px;} body .demo-class2 .layui-layer-btn{border-top:1px solid #E9E7E7;padding:0px;} body .demo-class2 .layui-layer-content
        {height:80px !important;font-size:30px;}
</style>
<img src="__PUBLIC__/Admin/images/1000000.jpg" class="scanimg1" width="200"
     style="margin-left: 12px; position: absolute;top:120px; right: 0;"/>
<img src="__PUBLIC__/Admin/images/2000000.jpg" class="scanimg2"  width="200"
     style="margin-left: 12px; position: absolute;top:340px; right: 0;"/>

<div class="main-container" id="main-container">
    <include file="Public/sidebar"/>
    <div class="main-content">
        <div id="create_box" class="row" style="margin: 20px 0 0 0;">
            <div class="col-lg-8">
                <div class="btn-group">
                    <p id="show_input"
                       style="width: 400px; margin-right: 12px; overflow: hidden; height: 38px; float: left; padding: 0 12px; font-size: 28px; border:#000 solid 1px;"></p>
                    <!-- <input type="text" placeholder="请扫筐" id="saoma" class="input-text radius"/> -->
					<input type="text" placeholder="请扫{:C('scanorder.lang_name')}" id="saoma" class="input-text radius"/>
                    <button type="button" class="btn btn-primary radius" style="margin-right: 10px;">重置</button>
                </div>
            </div><!-- /input-group -->
        </div>
        <div id="create_tb" class="col-lg-9">
			<for start="0" end="$basket_nums">
				<div class="box">
					<table class="table table-bordered">
						<tr>
							<td colspan="2">{:C("scanorder.lang_name")}号：<span>待扫描</span></td>
							<td colspan="2" style="font-size: 24px;">筐：<span>待扫描</span></td>
						</tr>
					</table>
				</div>
			</for>
        </div>
    </div>
    <div style="font-size: 22px;">
        第一步：扫{:C("scanorder.lang_name")}；第二步：扫描商品（扫描之前请先扫右上条码）；第三步：扫描商品（待全部扫描完成）；第四步：扫描右下条形码
    </div>
    <script id="script_tr" type="text/html">
        <tr>
            <td>序号</td>
            <td>名称</td>
            <td>编码</td>
            <td>数量</td>
        </tr>
    </script>
    <include file="Public/footerjs"/>
    <script type="text/javascript">
		var bodyclientHeight=document.body.clientHeight;
		
        var a_post = new Array();//{:C("scanorder.lang_name")}号存储
        var to_first;//初始化需要的变量，存储初始状态
        var in_box = new Array();//筐的编号
        var k_length = 7;//大于k_length的算{:C("scanorder.lang_name")}条形码，否则算筐的
        var input_value = '';
        for (var i = 0; i < $("table").length; i++) {
            $("table").eq(i).attr('title', i + 1);
        }
			
		//屏幕滚动事件-begin
		$(window).on("scroll",function(){
			var scrollTop=$(window).scrollTop();
			if(scrollTop>100){
				$("#create_box").css({
					'top': $(window).scrollTop(),
					'margin':'0',
					'position':'absolute',
					'z-index':'99',
					'width':'100%',
					'filter':'alpha(Opacity=80)',
					'-moz-opacity':'0.5',
					'opacity': '0.5'
				});
				$(".system").css({
					'top':scrollTop+bodyclientHeight/2-180+'px'
				});
				$(".scanimg1").css({
					'top':scrollTop+bodyclientHeight/2-380+'px'
				});
				$(".scanimg2").css({
					'top':scrollTop+bodyclientHeight/2-180+'px'
				});
				
			}else{
				$("#create_box").css({
					'top': $(window).scrollTop(),
					'margin':'20px 0 0 0',
					'position':'relative',
					'z-index':'99',
					'width':'100%',
					'filter':'alpha(Opacity=100)',
					'-moz-opacity':'1',
					'opacity': '1'
				});
			}
        });
		//屏幕滚动事件-end
		
        //ajax封装
        function get_data(data, url, suc, type) {
            $.ajax({
                type: type,
                data: data,
                url: url,
                success: function (msg) {
                    suc(msg);
                }
            });
        }
        //输入{:C("scanorder.lang_name")}号执行的方法
        function input_order_no() {
            if (!check(a_post, $("#create_box #show_input").html())) {
                show_alert('请不要重复扫描！');
				play_audio_file('failed');
                return false;
            }
            $("table").eq(a_post.length).find('span:eq(0)').html($("#show_input").html());
            get_data('orderno=' + $("#create_box #show_input").html(), "__APP__/ScanOrder/get_goods", get_goods, 'get');
        }
        //获取{:C("scanorder.lang_name")}的商品信息
        function get_goods(msg) {
            var msg = JSON.parse(msg);
            if (msg.flag == 0) {
                show_alert(msg.data);
				play_audio_file('failed');
                return false;
            }else{
				play_audio_file('success');
			}
            //////成功之后，将已经输入的{:C("scanorder.lang_name")}二维码记录在数组中，防止重复扫描
            a_post.push($("#create_box #show_input").html());
            button_value = 1;
            //下面的代码主要是拿到数据库的数据之后，在页面上以表格的形式展示
            var data = msg.data;
            var j = 0;
            for (var d in data) {
                var c_tr = $("<tr><td>序号</td><td>名称</td><td>编码</td><td>数量</td></tr>");
                c_tr.children('td').eq(0).html(j);
                c_tr.children('td').eq(1).html(data[d].goods_name);
                c_tr.children('td').eq(2).html(data[d].bar_code);
                c_tr.children('td').eq(3).html(data[d].goods_nums);
                c_tr.prop('title', data[d].bar_code);
                $("#create_tb table").eq(in_box.length - 1).append(c_tr);
                j++;
            }
            $("#saoma").attr('placeholder', '扫描{:C("scanorder.lang_name")}条码！');
            system_alert('扫描{:C("scanorder.lang_name")}条码！');
        }
        //检查再次扫码的{:C("scanorder.lang_name")}号是不是重复的内容
        function check(a_post, input_value) {
            for (var i = 0; i < a_post.length; i++) {
                if (a_post[i] == input_value) {
                    return false;
                }
            }
            return true;
        }
        //模拟扫码输入
        var button_value = 2;//开关，为1时，接下来扫描的是{:C("scanorder.lang_name")}条形码，2=》筐，3=》商品
        //        $("#create_box button:eq(0)").on("click", function () {
        //            /////此处扫描存在3中情况，分别为 扫{:C("scanorder.lang_name")}、扫筐、扫商品
        //            do_scan();
        //        });
        //开启扫商品开关
        var k = 0;
        // $("#create_box button:eq(2)").on("click", function () {
        function sao_goods() {
            if (k > 0) {
                return false;
            }
            if (a_post.length == in_box.length && in_box.length > 0) {
                button_value = 3;
                $(this).attr('class', 'btn btn-default');
                // $(".show").html('扫描商品条码！');
                $("#saoma").attr('placeholder', '扫描商品条码！');
                system_alert('扫描商品条码！');
                show_field('开始扫描商品条码！');
                to_first = $("#create_tb").html();
                k++;
            }
            else {
                show_field_s('筐与{:C("scanorder.lang_name")}数量不一致');
				play_audio_file('failed');
				return false;
            }
			play_audio_file('success');
        }
        
        function do_scan(div_value) {
            /////如果是扫描了 页面上的 条形码1000000 ，则执行下面的语句
            if (div_value == '1000000') {
                sao_goods();
                return false;
            }
            //sub_suc()
            if (div_value == '2000000') {
                sub_suc();
                return false;
            }
            if (button_value == 1) { 
				//扫订单/面单的条码
                //小于k_length位算作筐的条形码
                if (div_value.length < k_length) {
                    show_field('请扫{:C("scanorder.lang_name")}');
					play_audio_file('failed');
                }
                else {
					<!-- play_audio_file('success'); -->
                    input_order_no();
                }
            }
            else if (button_value == 2) { 
				//扫筐的条码
                if (div_value.length >= k_length) {
                    <!-- show_field('请扫筐'); -->
					show_field('请扫{:C("scanorder.lang_name")}');
					play_audio_file('failed');
                }
                else {
                    if (div_value.length > 0) {
                        input_box_no();
                    }
                }
            }
            else { 
				//扫商品的条码
                input_goods_no();
            }
        }
        //点击“完成”按钮事件
        //$("#create_box button:eq(3)").on("click", function () {
        function sub_suc() {
            if (check_count() && in_box.length > 0) {
                var post_order_no = '';
                var post_box_no = '';
                for (var i = 0; i < a_post.length; i++) {
                    post_order_no += ',' + a_post[i];
                    post_box_no += ',' + in_box[i];
                }
                post_order_no = post_order_no.substr(1);
                post_box_no = post_box_no.substr(1);
                var url = "__APP__/ScanOrder/post_goods";
                get_data('orderno=' + post_order_no + '&kno=' + post_box_no, url, insert_suc, 'post');
            }
            else if (check_count() && in_box.length == 0) {
                show_field('操作有误！');
            }
            else {
                show_field('请扫描完后再点击“完成”');
				play_audio_file('failed');
            }
        }
        $("#create_box button:eq(0)").on("click", function () {
            if (button_value != 3) {
                show_field('当前状态不允许重置');
                return false;
            }
            var index = layer.open({
                type: 0,
                title: '系统提示',
                skin: 'demo-class',
                content: '重置之后，将会重新扫描商品',
                time:1200,
                area: ['1000px', '180px'],
              //  btn: ['<img src="__PUBLIC__/Admin/images/btn_yes.png" style="margin-left: 12px;" />', '<img src="__PUBLIC__/Admin/images/btn_no.png" style="margin-left: 590px;margin-top:-30px;" />'],
                offset: ["100px"],
                yes: function () {
                    if (to_first) {
                        $("#create_tb").html(to_first);
                        $("#saoma").prop("value", '');
                    }
                    layer.close(index);
                },
            });
        });
        
        
        function input_goods_no() {
            var tr = $("#create_tb table tr");
            for (var i = 0; i < tr.length; i++) {
                var td_value = tr.eq(i).children('td').eq(3).html() * 1;
                if (tr.eq(i).prop("title") == $("#show_input").html() && td_value > 0) {
					var divtop=tr.eq(i).parents('table').offset().top;
					var scrollTop=$(window).scrollTop();
					if(scrollTop!=divtop){
						$('html,body').animate({scrollTop: divtop-100+'px'},400);
					}
                    tr.eq(i).children('td').eq(3).html(td_value - 1);
                    tr.find('td').css('background-color', 'transparent');
                    tr.eq(i).children('td').eq(3).css('background-color', '#f00');
                    var box_num = '' + (tr.eq(i)).parents('table').find("tr").eq(0).find('span').eq(1).html() * 1;
                    //alerts_field(box_num);//扫描一个商品之后弹出
                    play_audio(box_num);//播放筐号
                    check_order_success();//检查某个、全部{:C("scanorder.lang_name")}是否扫描完毕
                    return false;
                }
            }
            if (check_goods($("#create_box #show_input").html()) && $("#create_box #show_input").html() != 0) {
                show_alert('该商品已经扫描完毕！');
				play_audio_file('finish');
            }
            else {
                show_alert('该商品不在当前{:C("scanorder.lang_name")}内！');
				play_audio_file('failed');
            }
        }
        function check_goods(v) {
            var tr = $("table tr");
            var all_count = 0;
            var s = 0;
            for (var i = 0; i < tr.length; i++) {
                if (tr.eq(i).prop('title') == v) {
                    if (tr.eq(i).children('td').eq(3)) {
                        all_count += tr.eq(i).children('td').eq(3).html() * 1;
                        s = 1;
                    }
                }
            }
            if (s == 1 && all_count == 0) {
                return true;//商品已经扫描完成
            }
            else {
                return false;//商品不存在
            }
        }
        //扫描筐
        function input_box_no() {
            if (!check(in_box, $("#create_box #show_input").html())) {
                show_field('不要重复扫描筐');
				play_audio_file('failed');
                return false;
            }
            if (in_box.length == $("#create_tb table").length) {
                show_field('您已经扫完了所有筐，不容许再扫描');
				play_audio_file('failed');
                return false;
            }
            $("#create_tb table").eq(in_box.length).find('tr:eq(0)').find('span').eq(1).html($("#create_box #show_input").html());
            //$(".show").html('扫筐的条码');
            $("#saoma").attr('placeholder', '扫描{:C("scanorder.lang_name")}条码！');
            system_alert('扫描{:C("scanorder.lang_name")}条码！');
            in_box.push($("#create_box #show_input").html());
            button_value = 1;
			play_audio_file('success');
        }
        function check_order_success() {
            for (var i = 0; i < $("#create_tb table").length; i++) {
                var num = 0;
                for (var j = 1; j < $("#create_tb table").eq(i).find("tr").length; j++) {
                    num = num + $("#create_tb table").eq(i).find("tr").eq(j).find("td:eq(3)").html() * 1;
                }
                if (num == 0 && $("#create_tb table").eq(i).find("tr").length > 1) {
                    $("#create_tb table").eq(i).find('td').css({
                        'opacity': 0.8,
                    });
                    $("#create_tb table").eq(i).css('position', 'relative');
                    $("#create_tb table").eq(i).append($("<div class='g_success'>已完成</div>"));
                    $("#create_tb table").eq(i).find('td').css('background-color', 'transparent');
                }
            }
            if (check_count()) {
                $("#saoma").attr('placeholder', '扫描完毕！点击完成按钮进入下一轮！');
                system_alert('扫描完毕！点击完成按钮进入下一轮！');
				play_audio_file('finish');
                //$("#create_box .show").html('商品扫描完毕！点击提交按钮即可进入下一轮的操作！');
            }
        }
        function check_count() {
            var tr = $("#create_tb table tr");
            for (var i = 0; i < tr.length; i++) {
                if (tr.eq(i).children('td').eq(3).html() * 1 > 0) {
                    return false;//存在商品没有处理完
                }
            }
            return true;//商品都处理完
        }
        //////提交信息成功
        function insert_suc(msg) {
            msg = JSON.parse(msg);
            if (msg.flag == 0) {
                show_alert(msg.data);
				play_audio_file('failed');
            }
            else {
                show_alert(msg.data);
				play_audio_file('success');
                setTimeout(function () {
                    window.location.reload();
                }, 1000);
            }
        }
        function alerts_field(tag) {
            var index = tag;
            show_field(index);
        }
        $(document).keyup(function () {
            $("#saoma").focus();
        });
        $(document).mouseup(function () {
            $("#saoma").focus();
        });
        $(document).on("ready", function () {
            $("#saoma").focus();
        });
        function play_audio(num) {
            var url = "__PUBLIC__";
            if ($("audio").length == 0) {
                $("body").append($("<audio src='' autoplay></audio>"));
            }
            var i = 0;
            var timer = setInterval(function () {
                if (i < num.length) {
                    $("audio").attr('src', url + '/Admin/Voice/' + num[i] + '.wav');
                }
                <!-- else if (i == num.length) { -->
                    <!-- $("audio").attr('src', url + '/Admin/Voice/num.wav'); -->
                <!-- } -->
                else {
                    clearInterval(timer);
                }
                i++;
            }, 600);
        }
		function play_audio_file(filename) {
            var url = "__PUBLIC__";
            if ($("audio").length == 0) {
                $("body").append($("<audio src='' autoplay></audio>"));
            }
            $("audio").attr('src', url + '/Admin/Voice/'+filename+'.wav');
        }
        ////////扫码事件
        $("#saoma").keydown(function (event) {
            layer.closeAll('page');
            if (event.keyCode == 13) {
                if ($("#saoma").val() == '') {
                    return false;
                }
                if ($("#saoma").val() == 'yes') {
                    $(".layui-layer-btn a:eq(0)").click();
                    $("#saoma").prop("value", '');
                    return false;
                }
                if ($("#saoma").val() == 'no') {
                    $(".layui-layer-btn a:eq(1)").click();
                    $("#saoma").prop("value", '');
                    return false;
                }
                $("#show_input").html($.trim($("#saoma").val()));
                $("#saoma").prop("value", '');
                do_scan($("#show_input").html());
            }
        });
<!-- alert(window.screen.availHeight);          //屏幕可用工作区的高 -->
<!-- alert(window.screen.height);                //屏幕分辨率的高 -->
<!-- alert(document.body.offsetHeight);      //网页可见区域宽(body)，包括border、margin等 -->
<!-- alert(document.body.clientHeight);       //网页可见区域高(body) -->
        /////提示框
        function system_alert(msg) {
            var index = 0;//0表示没有开启提示
            if (index == 0) {
                $("body").append($("<div draggable='true' class='system' ></div>"));
            }
            $(".system").html(msg);
            $(".system").css({
                padding: '12px 32px',
                'background-color': '#900',
                opacity: '0.9',
                color: '#fff',
                'font-size': '24px',
                'font-weight': 'bolder',
                position: 'absolute',
                border: '#999 solid 4px',
                'border-radius': '4px',
            });
            var top = document.body.clientHeight/2-80+'px';
            var left = ($("body").innerWidth() - $(".system").innerWidth()) / 2 + 'px';
            $(".system").css({
                left: left,
                top: top,
            });
        }
		function show_alert(msg) {
            var index = layer.open({
                type: 0,
                title: '系统提示',
                skin: 'demo-class',
                content: "<div style='padding:12px;'>" + msg + "</div>",
                area: ['1000px', '180px'],
                time:1200,
				offset: ["100px"],
               // btn: ['<img src="__PUBLIC__/Admin/images/btn_yes.png" style="margin-left: 12px;" />', '<img src="__PUBLIC__/Admin/images/btn_no.png" style="margin-left: 590px;margin-top:-30px;" />'],
                yes: function () {
                    layer.close(index);
                }
            });
        }
		function show_field(msg) {
            var index = layer.open({
                type: 1,
                title: '系统提示',
                skin: 'demo-class2',
                content: "<div style='padding:12px;'>" + msg + "</div>",
                btn: ['知道了'],
                offset: ["100px"],
                time: 800,
                area: ['600px', '180px'],
                yes: function () {
                    layer.close(index);
                }
            });
        }
		////////这里的yes和or按钮不能删除
        function show_field_s(msg) {
            var index = layer.open({
                type: 0,
                title: '系统提示',
                content: "<div style='padding:12px;'>" + msg + ",点击确认可撤销！</div>",
                skin: 'demo-class',
                area: ['1000px', '320px'],
                btn: ['<img src="__PUBLIC__/Admin/images/btn_yes.png" style="margin-left: 12px;" />', '<img src="__PUBLIC__/Admin/images/btn_no.png" style="margin-left: 590px;margin-top:-30px;" />'],
                yes: function () {
                    <!-- $("#saoma").prop("placeholder", '请扫筐'); -->
					$("#saoma").prop("placeholder", '请扫{:C("scanorder.lang_name")}');
                    <!-- system_alert('请扫筐'); -->
					system_alert('请扫{:C("scanorder.lang_name")}');
                    $("#create_tb table").eq(in_box.length - 1).find("span:eq(1)").html('待扫描');
                    in_box.pop();
                    button_value = 1;
                    //////////////////////////////////////////
                    layer.close(index);
                }
            });
        }
        <!-- system_alert('请扫筐'); -->
		system_alert('请扫{:C("scanorder.lang_name")}');
        //////////////////提示框移动
    </script>
</div>
</div><!-- /.main-container -->
</body>